<template>
    <div>
        <v-layout row justify-center>
            <v-flex md9 lg8>
                <v-card class="movietop">
                    <div class="mod1">
                     <dl>
                         <dt class="type">类型:</dt>
                         <dd class="dd0">
                             <i v-for="n in movie" :key="n.title">
                             <router-link :to=n.to>{{n.title}}</router-link>
                             </i>
                         </dd>
                     </dl>
                    </div>
                </v-card>
                <v-card>
                    <div class="mod1">
                     <dl>
                         <dt class="type">年代:</dt>
                         <dd class="dd0">
                             <i v-for="tt in movietime" :key="tt.time">
                             <router-link :to=tt.to>{{tt.time}}</router-link>
                             </i>
                         </dd>
                     </dl>
                    </div>
                </v-card>
                <v-card>
                    <div class="mod1">
                     <dl>
                         <dt class="type">地区:</dt>
                         <dd class="dd0">
                             <i v-for="o in moviediqu" :key="o.diqu">
                             <router-link :to=o.to>{{o.diqu}}</router-link>
                             </i>
                         </dd>
                     </dl>
                    </div>
                </v-card>
            </v-flex>
        </v-layout>
         <v-layout row justify-center>
      <v-flex md9 lg8 sm10 xl8>
    <v-card class="topinout">
    <v-layout>
      <v-flex>
         <div class="title">热门电影</div>
      </v-flex>
    </v-layout>
      <v-container grid-list-xl fluid class="mo1">
          <v-layout row wrap>
            <v-flex
              v-for="n in 20"
              :key="n"
              xs4
              md2
              sm3
              d-flex
            >
            <v-hover>
              <v-card flat tile class="d-flex" slot-scope="{ hover }" :class="`elevation-${hover ? 12 : 2}`">
                <v-img
                  :src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
                  :lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
                  aspect-ratio="0.7"
                >
                  <v-layout
                    slot="placeholder"
                    fill-height
                    align-center
                    justify-center
                    ma-0
                  >
                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                  </v-layout>
                </v-img>
              </v-card>
            </v-hover>
            </v-flex>
          </v-layout>
        </v-container>
        </v-card>
             </v-flex>
    </v-layout>
    </div>
</template>

<script>
export default {
    name:"MovieIndex",
    data(){
        return{
        drawer: true,
        items: [
          { title: 'Home', icon: 'dashboard' },
          { title: 'About', icon: 'question_answer' }
        ],
        movie:[
          {title:"动作片",to:"/"},
          {title:"剧情片",to:"/"},
          {title:"爱情片",to:"/"},
          {title:"科幻片",to:"/"},
          {title:"恐怖片",to:"/"},
          {title:"战争片",to:"/"}
        ],
        movietime:[
            {time:"2018",to:"/"},
            {time:"2017",to:"/"},
            {time:"2016",to:"/"},
            {time:"2015",to:"/"},
            {time:"2014",to:"/"},
            {time:"2013",to:"/"},
            {time:"2012",to:"/"},
            {time:"2011",to:"/"}
        ],
        moviediqu:[
            {diqu:"大陆",to:"/"},
            {diqu:"美国",to:"/"}
        ],
        right: null
        }
    }
}
</script>

<style>
.movietop{
    margin-top: 20px;
}
.mod1{
    position: relative;
    overflow: hidden;
    height: 40px;
    zoom: 1;
    padding-left: 36px;
    padding-right: 50px;
    border-top: 1px dashed #e6e6e6;
}
.type{
    position: absolute;
    left: 0;
    top: 10px;
    color: #999;
    padding: 2px 0;
    margin-left: 20px;
}
.dd0{
    padding: 5px 0;
}
.dd0 a{
    float: left;
    margin: 5px 0 5px 20px;
    padding: 2px 6px;
    zoom: 1;
    height: 16px;
    white-space: nowrap;
    word-wrap: break-word;
    position: relative;
}
.topinout{
  margin-top: 20px;
}
.mo1{
  margin-top: -10px;
}
.title{
  float: left;
  margin:15px 0 -10px 20px;
}
</style>

